<template>
  <el-config-provider :locale="zhCn">
    <div id="app">
      <el-container class="app-container">
        <el-aside width="200px">
          <div class="logo">
            智能家居
          </div>
          <el-menu
            :default-active="activeIndex"
            class="app-menu"
            @select="handleSelect">
            <el-menu-item index="/">
              <el-icon><Monitor /></el-icon>
              <span>仪表盘</span>
            </el-menu-item>
            <el-menu-item index="/devices">
              <el-icon><List /></el-icon>
              <span>设备管理</span>
            </el-menu-item>
            <el-menu-item index="/automation">
              <el-icon><Timer /></el-icon>
              <span>自动化</span>
            </el-menu-item>
            <el-menu-item index="/settings">
              <el-icon><Setting /></el-icon>
              <span>设置</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-container>
          <el-header>
            <div class="header-content">
              <el-breadcrumb>
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item>{{ currentPageName }}</el-breadcrumb-item>
              </el-breadcrumb>
              <div class="header-actions">
                <el-tooltip
                  content="消息中心"
                  placement="bottom"
                  effect="light">
                  <el-button 
                    type="text" 
                    @click="router.push('/message')"
                    class="header-icon-btn">
                    <el-badge :value="unreadMessages" :max="99" class="badge">
                      <el-icon><Bell /></el-icon>
                    </el-badge>
                  </el-button>
                </el-tooltip>
                <el-tooltip
                  content="用户中心"
                  placement="bottom"
                  effect="light">
                  <el-button 
                    type="text" 
                    @click="router.push('/login')"
                    class="header-icon-btn">
                    <el-icon><User /></el-icon>
                  </el-button>
                </el-tooltip>
              </div>
            </div>
          </el-header>
          <el-main>
            <router-view v-slot="{ Component }">
              <component :is="Component" />
            </router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </el-config-provider>
</template>

<script>
import { ref, computed } from 'vue'
import { useStore } from 'vuex'
import { useRoute, useRouter } from 'vue-router'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import {
  Monitor,
  List,
  Timer,
  Setting,
  Bell,
  User
} from '@element-plus/icons-vue'

export default {
  name: 'App',
  components: {
    Monitor,
    List,
    Timer,
    Setting,
    Bell,
    User
  },
  setup() {
    const store = useStore()
    const route = useRoute()
    const router = useRouter()
    const activeIndex = ref(route.path)

    // 主题相关
    const isDark = computed(() => store.state.theme.isDark)
    const themeColor = computed(() => store.state.theme.primaryColor)

    // 页面名称映射
    const currentPageName = computed(() => {
      const routeMap = {
        '/': '仪表盘',
        '/devices': '设备管理',
        '/automation': '自动化',
        '/settings': '设置'
      }
      return routeMap[route.path] || ''
    })

    // 导航处理
    const handleSelect = (index) => {
      console.log('导航到:', index)
      router.push(index)
    }

    // 初始化主题设置
    const initTheme = () => {
      const savedTheme = localStorage.getItem('theme')
      if (savedTheme) {
        const theme = JSON.parse(savedTheme)
        store.dispatch('updateTheme', theme)
      }
    }

    // 监听主题变化并保存到本地存储
    store.watch(
      state => state.theme,
      (theme) => {
        localStorage.setItem('theme', JSON.stringify(theme))
      },
      { deep: true }
    )

    const unreadMessages = ref(5) // 示例：未读消息数量

    initTheme()

    return {
      activeIndex,
      isDark,
      themeColor,
      currentPageName,
      zhCn,
      handleSelect,
      router,
      unreadMessages
    }
  }
}
</script>

<style>
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

#app {
  height: 100vh;
  background-color: var(--el-bg-color);
  color: var(--el-text-color-primary);
}

.app-container {
  height: 100%;
}

.el-aside {
  background-color: var(--el-menu-bg-color);
  transition: background-color 0.3s;
}

.logo {
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: var(--el-text-color-primary);
  background-color: var(--el-menu-bg-color);
  border-bottom: 1px solid var(--el-border-color-light);
}

.app-menu {
  border-right: none;
}

.el-menu-item {
  border-left: 3px solid transparent;
}

.el-menu-item.is-active {
  border-left: 3px solid var(--el-color-primary);
  background-color: var(--el-menu-hover-bg-color) !important;
}

.el-menu-item:hover {
  background-color: var(--el-menu-hover-bg-color) !important;
}

.el-header {
  background-color: var(--el-bg-color-overlay);
  border-bottom: 1px solid var(--el-border-color-light);
  padding: 0 20px;
}

.header-content {
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.header-actions .el-button {
  color: var(--el-text-color-primary);
}

.el-main {
  background-color: var(--el-bg-color);
  padding: 0;
}

/* 深色主题全局样式 */
.dark-theme {
  /* 基础颜色变量 */
  --el-bg-color: #141414;
  --el-bg-color-overlay: #1f1f1f;
  --el-text-color-primary: #ffffff;
  --el-text-color-regular: #e0e0e0;
  --el-border-color: #434343;
  --el-border-color-light: #434343;
  --el-mask-color: rgba(0, 0, 0, 0.8);
  --el-menu-bg-color: #141414;
  --el-menu-hover-bg-color: #1f1f1f;
  color-scheme: dark;
}

/* 深色主题组件样式覆盖 */
.dark-theme .el-menu {
  --el-menu-bg-color: #141414;
  --el-menu-hover-bg-color: #1f1f1f;
  border-right: 1px solid var(--el-border-color);
}

.dark-theme .el-breadcrumb__item {
  color: var(--el-text-color-regular);
}

.dark-theme .el-breadcrumb__item:last-child {
  color: var(--el-text-color-primary);
}

.dark-theme .el-card {
  --el-card-bg-color: var(--el-bg-color-overlay);
  border-color: var(--el-border-color);
  color: var(--el-text-color-primary);
}

.dark-theme .el-table {
  --el-table-bg-color: var(--el-bg-color-overlay);
  --el-table-tr-bg-color: var(--el-bg-color-overlay);
  --el-table-header-bg-color: var(--el-bg-color);
  --el-table-border-color: var(--el-border-color);
  color: var(--el-text-color-primary);
}

.dark-theme .el-table th,
.dark-theme .el-table td {
  background-color: var(--el-bg-color-overlay);
  border-bottom-color: var(--el-border-color);
}

.dark-theme .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: var(--el-menu-hover-bg-color);
}

.dark-theme .el-dialog {
  --el-dialog-bg-color: var(--el-bg-color-overlay);
  --el-dialog-border-color: var(--el-border-color);
}

.dark-theme .el-dialog__header {
  border-bottom: 1px solid var(--el-border-color);
}

.dark-theme .el-input__inner {
  background-color: var(--el-bg-color);
  border-color: var(--el-border-color);
  color: var(--el-text-color-primary);
}

.dark-theme .el-input__inner:hover,
.dark-theme .el-input__inner:focus {
  border-color: var(--el-color-primary);
}

.dark-theme .el-button {
  --el-button-bg-color: var(--el-bg-color-overlay);
  --el-button-border-color: var(--el-border-color);
  --el-button-hover-bg-color: var(--el-color-primary-light-3);
  --el-button-hover-border-color: var(--el-color-primary-light-3);
}

.dark-theme .el-button--text {
  color: var(--el-text-color-regular);
}

.dark-theme .el-button--text:hover {
  color: var(--el-color-primary);
}

.dark-theme .el-select-dropdown {
  background-color: var(--el-bg-color-overlay);
  border-color: var(--el-border-color);
}

.dark-theme .el-select-dropdown__item {
  color: var(--el-text-color-regular);
}

.dark-theme .el-select-dropdown__item.hover,
.dark-theme .el-select-dropdown__item:hover {
  background-color: var(--el-menu-hover-bg-color);
}

.dark-theme .el-pagination {
  --el-pagination-button-bg-color: var(--el-bg-color-overlay);
  --el-pagination-hover-color: var(--el-color-primary);
}

.dark-theme .el-pagination button:disabled {
  background-color: var(--el-bg-color);
}

/* 过渡动画 */
.el-aside,
.el-main,
.el-header,
.el-card,
.el-table,
.el-input__inner,
.el-button,
.el-menu {
  transition: all 0.3s ease-in-out;
}

.header-icon-btn {
  padding: 0 10px;
  height: 60px;
  font-size: 20px;
}

.header-icon-btn:hover {
  background-color: var(--el-menu-hover-bg-color);
}

.badge {
  margin-top: -2px;
}
</style>